<!--
 * @Author: C.
 * @Date: 2023-03-27 10:20:14
-->
<template>
  <div :class="prefixCls">
    <Popover
      title=""
      trigger="click"
      :overlayClassName="`${prefixCls}__overlay`"
      @visible-change="visibleChange"
    >
      <Badge :count="count" dot>
        <BellOutlined />
      </Badge>
      <template #content>
        <Tabs>
          <template #rightExtra>
            <div>
              <LoadingOutlined v-show="loading" />
              <RedoOutlined v-show="!loading" @click="fresh" />
            </div>
          </template>
          <template v-for="item in wsStore.notifys" :key="item.Type">
            <TabPane>
              <template #tab>
                {{ msgEnum.getLabel(item.Type) }}
                <span v-if="item.MsgList.length !== 0">({{ item.MsgList.length }})</span>
              </template>
              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
              <NoticeList :list="item.MsgList" @change="fresh" />
            </TabPane>
          </template>
        </Tabs>
      </template>
    </Popover>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onUnmounted } from 'vue';
  import { Popover, Tabs, Badge, TabPane } from 'ant-design-vue';
  import { BellOutlined, LoadingOutlined, RedoOutlined } from '@ant-design/icons-vue';
  import NoticeList from './NoticeList.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { msgEnum } from '/@/maps/baseData/msgEnum';
  import { debounce } from 'lodash-es';
  import { useWsStore } from '/@/store/modules/websocket';
  import { usePeriod } from '/~/hooks/component/usePeriod';
  const { prefixCls } = useDesign('header-notify');
  // const { createMessage } = useMessage();
  const wsStore = useWsStore();
  const { loading, start, end } = usePeriod(1000);
  wsStore.connect();
  const count = computed(() => {
    let count = 0;
    for (let i = 0; i < wsStore.notifys.length; i++) {
      count += wsStore.notifys[i].MsgList.length;
    }
    return count;
  });
  onUnmounted(() => {
    wsStore.close();
  });
  const fresh = debounce(
    () => {
      start();
      wsStore.getNotifys(() => {
        end();
      });
    },
    500,
    {
      leading: true,
    },
  );
  fresh();
  function visibleChange(e) {
    if (e) {
      fresh();
    }
  }
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-header-notify';

  .@{prefix-cls} {
    padding-top: 2px;

    &__overlay {
      // max-width: 360px;
      // min-width: 200px;
      width: 360px;
    }

    .ant-tabs-content {
      width: 300px;
    }

    .ant-badge {
      font-size: 18px;

      .ant-badge-multiple-words {
        padding: 0 4px;
      }

      svg {
        width: 0.9em;
      }
    }
  }
</style>
